<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<view class="search-index">
			<!-- #ifndef H5 -->
			<view class="icon" @click="onCode">
				<text class="iconfont icon-saoyisao"></text>
			</view>
			<!-- #endif -->
			<!-- #ifdef  H5 -->
			<view class="icon" @click="onPayCode">
				<text class="iconfont icon-fukuanma"></text>
			</view>
			<!-- #endif -->
			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input type="text" placeholder="输入搜索内容" />
			</view>
			<view class="icon">
				<text class="iconfont icon-xiaoxi"></text>
			</view>
		</view>
		<!-- 分类数据 -->
		<view class="classify-data" :style="'height:'+height+'px'">
			<view class="classify-one">
				<scroll-view scroll-y class="classify-list">
					<view class="list action">
						<text>推荐分类</text>
					</view>
					<view class="list" @tap="TabSelect" :class="item.id==tabCur?'cur':''" 
					v-for="(item,index) in classList" :key="index"
					 :data-id="item.id">
						<!-- <text>精品上衣{{index}}</text> -->
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="classify-two-three">
				<scroll-view scroll-y class="scroll">
					<view class="classify-two">
						<view class="two-name">
							<view class="name">常用分类</view>
						</view>
						<view class="classify-three">
							<view class="list" v-for="(item,index) in classListChird" :key="index" @tap="toShopList(item.name,item.id)">
								<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	// 公共
	import common from '@/common/common.js'

	// 请求接口
	import $goods from '@/utils/api/goods.js';
	import $home from '@/utils/api/home.js';

	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				height: 0,
				tabCur: 0,
				classList: [],
				classListChird: []
			};
		},
		onReady() {
			setTimeout(() => {
				uni.hideTabBar()
			}, 100)
			let info = uni.createSelectorQuery().select(".page");
			info.boundingClientRect((data) => { //data - 各种参数
				// console.log(data.height);
				this.height = data.height - 100;
				// #ifdef APP-PLUS 
				this.height = data.height - 130;
				// #endif 

			}).exec()
		},
		created() {
			this.getGoodsCateList()
			this.getGoodsCateListChild()
		},
		methods: {
			// 得到商品分类
			getGoodsCateList() {
				
				// 利用缓存
				var cache_data = common.cache('catelist', null)
				if(cache_data){
					this.classList = cache_data
					this.tabCur = this.classList[0]['id']
				}else{
					// let param = {
					// 	pid: 0
					// };
					// $goods.getcatelist(param, 'GET').then(res => {
					// 	this.classList = res.data
					// 	this.tabCur = this.classList[0]['id']
					// 	common.cache('catelist', res.data, 3600)
					// });
					
					let param = {
						parent_id: 0
					};
					$goods.get_cat_child(param, 'GET').then(res => {
						this.classList = res.data
						this.tabCur = this.classList[0]['id']
						common.cache('catelist', res.data, 3600)
					});
					
				}
			},
			// 子分类
			getGoodsCateListChild(){
				var cache_data = common.cache('catelist_child' + this.tabCur, null)
				if(cache_data){
					this.classListChird = cache_data
				}else{
					let param = {
						parent_id: this.tabCur
					};
					$goods.get_cat_child(param, 'GET').then(res => {
						this.classListChird = res.data
						common.cache('catelist_child' + this.tabCur, res.data, 3600)
					});
				}
			},
			// // 缓存
			// cache(key, value, seconds) {
			// 	var timestamp = Date.parse(new Date()) / 1000
			// 	// console.log(timestamp + "===" + key)
			// 	if (key && value === null) {
			// 		//删除缓存
			// 		//获取缓存
			// 		var val = uni.getStorageSync(key);
			// 		var tmp = uni.getStorageSync(key+'time')
			// 		if (!tmp || timestamp >= tmp) {
			// 			console.log("key已失效")
			// 			uni.removeStorageSync(key)
			// 			return false
			// 		} else {
			// 			console.log("key未失效")
			// 			return val
			// 		}
			// 	} else if (key && value) {
			// 		//设置缓存
			// 		if (!seconds) {
			// 			var expire = timestamp + (10)
			// 		} else {
			// 			var expire = timestamp + seconds
			// 		}
			// 		uni.setStorageSync(key, value);
			// 		uni.setStorageSync(key+'time', expire);
			// 	} else {
			// 		console.log("key不能空")
			// 	}
			// },
			TabSelect(e) {
				
				this.tabCur = e.currentTarget.dataset.id;
				// this.mainCur = e.currentTarget.dataset.id;
				// this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
				
				this.getGoodsCateListChild(this.tabCur)
				
				// var cache_data = common.cache('catelist_child' + this.tabCur, null)
				// if(cache_data){
				// 	this.classListChird = cache_data
				// }else{
				// 	let param = {
				// 		pid: this.tabCur
				// 	};
				// 	$goods.getcatelist(param, 'GET').then(res => {
				// 		this.classListChird = res.data
				// 		common.cache('catelist_child' + this.tabCur, res.data, 600)
				// 	});
				// }
				
				// let param = {
				// 	pid: e.currentTarget.dataset.id
				// };
				// $goods.getcatelist(param, 'GET').then(res => {
				// 	this.classListChird = res.data
				// });
			},
			
			// 跳转商品列表
			toShopList(name,id){
				console.log(id);
				uni.navigateTo({
					url:'../SearchGoodsList/SearchGoodsList?keyword=' + name + '&id=' + id
				})
			},
			
			
			/**
			 * 扫一扫点击
			 */
			onCode() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			/**
			 * 付款码点击
			 */
			onPayCode() {
				uni.navigateTo({
					url: '/pages/PaymentCode/PaymentCode'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'classify.scss'
</style>
